<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朋克辩论赛 - AI对战平台</title>
    <style>
        :root {
            --punk-red: #ff3d00;
            --punk-pink: #ff00ff;
            --punk-blue: #00ffff;
            --punk-yellow: #ffff00;
            --punk-black: #121212;
            --punk-gray: #2d2d2d;
            --glow-red: 0 0 8px var(--punk-red), 0 0 20px var(--punk-red);
            --glow-blue: 0 0 8px var(--punk-blue), 0 0 20px var(--punk-blue);
            --glow-pink: 0 0 8px var(--punk-pink), 0 0 20px var(--punk-pink);
            --glow-yellow: 0 0 8px var(--punk-yellow), 0 0 20px var(--punk-yellow);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
            letter-spacing: 0.5px;
        }
        
        body {
            background-color: var(--punk-black);
            background-image: 
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23121212"/><path d="M0,50 L100,50 M50,0 L50,100" stroke="%23ff3d00" stroke-width="1" stroke-opacity="0.3"/><circle cx="25" cy="25" r="2" fill="%2300ffff"/><circle cx="75" cy="75" r="2" fill="%23ff00ff"/><circle cx="75" cy="25" r="2" fill="%23ffff00"/><circle cx="25" cy="75" r="2" fill="%23ff3d00"/></svg>'),
                radial-gradient(circle at 50% 50%, var(--punk-gray) 0%, transparent 70%);
            color: white;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .debater-panel {
            flex: 1;
            min-width: 300px;
            background-color: var(--punk-gray);
            border: 2px solid;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            position: relative;
        }
        
        .debater-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                45deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 50%,
                transparent 100%
            );
            z-index: 0;
        }
        
        .panel-pro {
            border-color: var(--punk-blue);
            box-shadow: var(--glow-blue);
        }
        
        .panel-con {
            border-color: var(--punk-pink);
            box-shadow: var(--glow-pink);
        }
        
        .panel-header {
            padding: 15px;
            text-align: center;
            border-bottom: 2px solid;
            position: relative;
            overflow: hidden;
        }
        
        .panel-pro .panel-header {
            background-color: rgba(0, 255, 255, 0.1);
            border-color: var(--punk-blue);
        }
        
        .panel-con .panel-header {
            background-color: rgba(255, 0, 255, 0.1);
            border-color: var(--punk-pink);
        }
        
        .panel-header h2 {
            font-size: 1.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            z-index: 1;
        }
        
        .panel-pro .panel-header h2 {
            color: var(--punk-blue);
            text-shadow: var(--glow-blue);
        }
        
        .panel-con .panel-header h2 {
            color: var(--punk-pink);
            text-shadow: var(--glow-pink);
        }
        
        .topic-box {
            padding: 20px;
            background-color: rgba(0,0,0,0.3);
            border-bottom: 1px dashed;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .panel-pro .topic-box {
            border-color: var(--punk-blue);
        }
        
        .panel-con .topic-box {
            border-color: var(--punk-pink);
        }
        
        .topic-text {
            font-size: 1.2rem;
            text-align: center;
            line-height: 1.6;
            padding: 10px;
            border: 1px solid;
            border-radius: 4px;
            position: relative;
            z-index: 1;
        }
        
        .panel-pro .topic-text {
            border-color: var(--punk-blue);
            color: var(--punk-blue);
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
        }
        
        .panel-con .topic-text {
            border-color: var(--punk-pink);
            color: var(--punk-pink);
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
        }
        
        .chat-container {
            height: 400px;
            overflow-y: auto;
            padding: 20px;
            background-color: rgba(0,0,0,0.2);
            position: relative;
            z-index: 1;
        }
        
        .chat-container::-webkit-scrollbar {
            width: 8px;
        }
        
        .chat-container::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.3);
        }
        
        .chat-container::-webkit-scrollbar-thumb {
            background: var(--punk-red);
            border-radius: 4px;
        }
        
        .message {
            margin-bottom: 15px;
            max-width: 85%;
            animation: fadeIn 0.3s ease-out;
            position: relative;
            padding: 10px;
            border-radius: 4px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .user-message {
            margin-left: auto;
            background-color: rgba(255, 61, 0, 0.2);
            border: 1px solid var(--punk-red);
            box-shadow: 0 0 10px rgba(255, 61, 0, 0.1);
        }
        
        .ai-message {
            margin-right: auto;
            border: 1px solid;
        }
        
        .panel-pro .ai-message {
            background-color: rgba(0, 255, 255, 0.1);
            border-color: var(--punk-blue);
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
        }
        
        .panel-con .ai-message {
            background-color: rgba(255, 0, 255, 0.1);
            border-color: var(--punk-pink);
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.1);
        }
        
        .message-text {
            line-height: 1.5;
        }
        
        .input-container {
            display: flex;
            padding: 15px;
            background-color: rgba(0,0,0,0.3);
            border-top: 1px dashed;
            position: relative;
            z-index: 1;
        }
        
        .panel-pro .input-container {
            border-color: var(--punk-blue);
        }
        
        .panel-con .input-container {
            border-color: var(--punk-pink);
        }
        
        .user-input {
            flex: 1;
            padding: 12px;
            background-color: var(--punk-black);
            border: 1px solid;
            border-radius: 4px;
            color: white;
            font-size: 1rem;
            outline: none;
            transition: all 0.2s ease;
        }
        
        .panel-pro .user-input {
            border-color: var(--punk-blue);
        }
        
        .panel-con .user-input {
            border-color: var(--punk-pink);
        }
        
        .user-input:focus {
            box-shadow: var(--glow-yellow);
            border-color: var(--punk-yellow);
        }
        
        .send-button {
            margin-left: 10px;
            padding: 12px 20px;
            background-color: var(--punk-red);
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .send-button:hover {
            background-color: #ff6633;
            box-shadow: var(--glow-red);
            transform: translateY(-2px);
        }
        
        .send-button:disabled {
            background-color: #666;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .loading {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .control-panel {
            width: 100%;
            padding: 15px;
            background-color: var(--punk-gray);
            border: 2px solid var(--punk-yellow);
            border-radius: 8px;
            box-shadow: var(--glow-yellow);
            text-align: center;
        }
        
        .control-panel h3 {
            color: var(--punk-yellow);
            text-shadow: var(--glow-yellow);
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        
        .new-topic-button {
            padding: 10px 25px;
            background-color: var(--punk-yellow);
            color: var(--punk-black);
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
        }
        
        .new-topic-button:hover {
            box-shadow: var(--glow-yellow);
            transform: translateY(-2px);
        }
        
        /* 朋克装饰元素 */
        .punk-decoration {
            position: absolute;
            z-index: 0;
            opacity: 0.1;
        }
        
        .decor-1 {
            top: 10%;
            left: 5%;
            width: 80px;
            height: 80px;
            border: 3px solid var(--punk-red);
            transform: rotate(45deg);
        }
        
        .decor-2 {
            bottom: 10%;
            right: 5%;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px dashed var(--punk-blue);
        }
        
        .decor-3 {
            top: 30%;
            right: 8%;
            width: 40px;
            height: 40px;
            background-color: var(--punk-pink);
            transform: rotate(15deg);
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .chat-container {
                height: 300px;
            }
            
            .topic-text {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 正方选手面板 -->
        <div class="debater-panel panel-pro">
            <div class="punk-decoration decor-1"></div>
            <div class="punk-decoration decor-2"></div>
            
            <div class="panel-header">
                <h2>正方选手</h2>
            </div>
            
            <div class="topic-box">
                <div class="topic-text" id="pro-topic">加载中...</div>
            </div>
            
            <div class="chat-container" id="pro-chat">
                <div class="message ai-message">
                    <div class="message-text">我是正方辩手！请提出你的论点或问题，我会为你提供支持该辩题的专业辩论分析和论据。</div>
                </div>
            </div>
            
            <div class="input-container">
                <input type="text" class="user-input" id="pro-input" placeholder="输入你的论点/问题...">
                <button class="send-button" id="pro-send">发送</button>
            </div>
        </div>
        
        <!-- 反方选手面板 -->
        <div class="debater-panel panel-con">
            <div class="punk-decoration decor-3"></div>
            
            <div class="panel-header">
                <h2>反方选手</h2>
            </div>
            
            <div class="topic-box">
                <div class="topic-text" id="con-topic">加载中...</div>
            </div>
            
            <div class="chat-container" id="con-chat">
                <div class="message ai-message">
                    <div class="message-text">我是反方辩手！请提出你的论点或问题，我会为你提供反对该辩题的专业辩论分析和论据。</div>
                </div>
            </div>
            
            <div class="input-container">
                <input type="text" class="user-input" id="con-input" placeholder="输入你的论点/问题...">
                <button class="send-button" id="con-send">发送</button>
            </div>
        </div>
        
        <!-- 控制面板 -->
        <div class="control-panel">
            <h3>辩论控制中心</h3>
            <button class="new-topic-button" id="new-topic-btn">生成新辩题</button>
        </div>
    </div>
 
    <script>
        // 随机辩题库（正反对应）
        const debateTopics = [
            {
                pro: "人工智能的发展利大于弊",
                con: "人工智能的发展弊大于利"
            },
            {
                pro: "网络实名制应该全面推行",
                con: "网络实名制不应该全面推行"
            },
            {
                pro: "大学生应该以学业为重",
                con: "大学生应该以实践为重"
            },
            {
                pro: "环境保护比经济发展更重要",
                con: "经济发展比环境保护更重要"
            },
            {
                pro: "社交媒体增进了人际交往",
                con: "社交媒体疏远了人际交往"
            },
            {
                pro: "颜值重要性被过度放大",
                con: "颜值重要性并未被过度放大"
            },
            {
                pro: "短视频对青少年利大于弊",
                con: "短视频对青少年弊大于利"
            },
            {
                pro: "线上教育将取代线下教育",
                con: "线上教育不会取代线下教育"
            },
            {
                pro: "追星文化对青少年有益",
                con: "追星文化对青少年有害"
            },
            {
                pro: "内卷现象应该被抵制",
                con: "内卷现象是社会进步的必然"
            }
        ];
        
        // DOM元素
        const proTopic = document.getElementById('pro-topic');
        const conTopic = document.getElementById('con-topic');
        const proChat = document.getElementById('pro-chat');
        const conChat = document.getElementById('con-chat');
        const proInput = document.getElementById('pro-input');
        const conInput = document.getElementById('con-input');
        const proSend = document.getElementById('pro-send');
        const conSend = document.getElementById('con-send');
        const newTopicBtn = document.getElementById('new-topic-btn');
        
        // 当前选中的辩题索引
        let currentTopicIndex = 0;
        
        // 初始化辩题
        function initTopics() {
            currentTopicIndex = Math.floor(Math.random() * debateTopics.length);
            updateTopics();
        }
        
        // 更新辩题显示
        function updateTopics() {
            const topicPair = debateTopics[currentTopicIndex];
            proTopic.textContent = topicPair.pro;
            conTopic.textContent = topicPair.con;
            
            // 清空聊天记录（保留欢迎消息）
            while (proChat.children.length > 1) {
                proChat.removeChild(proChat.lastChild);
            }
            while (conChat.children.length > 1) {
                conChat.removeChild(conChat.lastChild);
            }
        }
        
        // 生成新辩题
        newTopicBtn.addEventListener('click', () => {
            let newIndex;
            do {
                newIndex = Math.floor(Math.random() * debateTopics.length);
            } while (newIndex === currentTopicIndex && debateTopics.length > 1);
            
            currentTopicIndex = newIndex;
            updateTopics();
            
            // 添加系统消息
            addMessage(proChat, `🔄 辩题已更新！当前支持：${debateTopics[currentTopicIndex].pro}`, false, 'pro');
            addMessage(conChat, `🔄 辩题已更新！当前反对：${debateTopics[currentTopicIndex].con}`, false, 'con');
        });
        
        // 添加消息到聊天窗口
        function addMessage(chatContainer, content, isUser = false, side = 'pro') {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.classList.add(isUser ? 'user-message' : 'ai-message');
            
            const messageText = document.createElement('div');
            messageText.classList.add('message-text');
            messageText.innerHTML = formatContent(content);
            
            messageDiv.appendChild(messageText);
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            
            return messageDiv;
        }
        
        // 格式化内容，处理换行和加粗
        function formatContent(content) {
            if (!content) return '';
            return content
                .replace(/\n/g, '<br>')
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/\*(.*?)\*/g, '<em>$1</em>');
        }
        
        // API配置
        const API_URL = "https://api.gitcode.com/api/v5/chat/completions";
        const API_KEY = "rjrZo2JN4d4XPscpTpeH7_UU";
        
        // 发送消息函数
        async function sendDebateMessage(inputElement, chatContainer, sendButton, isProSide) {
            const message = inputElement.value.trim();
            if (!message) return;
            
            // 获取当前辩题
            const currentTopic = isProSide 
                ? debateTopics[currentTopicIndex].pro 
                : debateTopics[currentTopicIndex].con;
            
            // 添加用户消息
            addMessage(chatContainer, message, true);
            inputElement.value = '';
            
            // 添加AI正在输入的消息
            const aiMessageDiv = addMessage(chatContainer, '', false, isProSide ? 'pro' : 'con');
            const aiMessageText = aiMessageDiv.querySelector('.message-text');
            
            // 禁用按钮并显示加载状态
            sendButton.disabled = true;
            sendButton.innerHTML = '<div class="loading"></div>辩论中...';
            
            // 构建System Prompt
            const systemPrompt = isProSide 
                ? buildProSystemPrompt(currentTopic)
                : buildConSystemPrompt(currentTopic);
            
            try {
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        "Authorization": `Bearer ${API_KEY}`,
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        "messages": [
                            { "role": "system", "content": systemPrompt },
                            { "role": "user", "content": message }
                        ],
                        "model": "hf_mirrors/deepseek-ai/DeepSeek-V3.1-Base",
                        "stream": true,
                        "max_tokens": 4096,
                        "temperature": 0.7
                    })
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error?.message || '请求失败，请稍后重试。');
                }
                
                if (!response.body) {
                    throw new Error('浏览器不支持流式响应。');
                }
                
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                let partialData = '';
                let fullContent = '';
                
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    
                    partialData += decoder.decode(value, { stream: true });
                    const lines = partialData.split('\n');
                    
                    // 处理所有完整的行
                    for (let i = 0; i < lines.length - 1; i++) {
                        const line = lines[i].trim();
                        if (!line) continue;
                        
                        if (line.startsWith('data:')) {
                            const dataPart = line.substring(5).trim();
                            if (dataPart === '[DONE]') continue;
                            
                            try {
                                const data = JSON.parse(dataPart);
                                const deltaContent = data.choices?.[0]?.delta?.content || '';
                                if (deltaContent) {
                                    fullContent += deltaContent;
                                    // 实时更新消息内容
                                    aiMessageText.innerHTML = formatContent(fullContent);
                                    chatContainer.scrollTop = chatContainer.scrollHeight;
                                }
                            } catch (e) {
                                console.error('解析流式数据失败:', e);
                            }
                        }
                    }
                    
                    // 保留最后一行不完整的数据
                    partialData = lines[lines.length - 1];
                }
                
            } catch (error) {
                console.error('请求出错:', error);
                aiMessageText.innerHTML = `<strong>❌ 辩论出错:</strong> ${error.message}`;
            } finally {
                // 恢复按钮状态
                sendButton.disabled = false;
                sendButton.innerHTML = '发送';
            }
        }
        
        // 构建正方System Prompt
        function buildProSystemPrompt(topic) {
            return `
你是一名专业的正方辩手，正在参加校园辩论赛，必须严格遵守以下规则：

1. 身份定位：坚定支持辩题"${topic}"，是该立场的专业辩手，逻辑清晰，论据充分。
2. 回答目标：为用户提供支持该辩题的论点、论据、案例和反驳策略。
3. 回答风格：
   - 朋克风格：语言犀利、直接、有冲击力，充满激情和斗志
   - 逻辑严密：论点明确，论据充分，论证过程严谨
   - 充满力量：使用强烈的语气和肯定的表达，增强说服力
   - 专业规范：符合辩论赛的专业要求，避免低俗和不文明用语
4. 功能支持：
   - 提供论点：为辩题提供强有力的支持论点
   - 收集论据：提供数据、案例、名言等支持材料
   - 反驳指导：预测反方可能的论点并提供反驳策略
   - 辩论技巧：提供辩论中的表达和应变技巧
5. 格式要求：
   - 使用自然的中文表达，避免过于学术化
   - 适当使用短句和感叹号，增强气势
   - 重要观点可以加粗强调
   - 不使用任何markdown标记，纯文本自然呈现
   - 分段清晰，便于阅读和理解

现在，用户需要你的辩论支持，请以专业辩手的身份提供帮助！
            `.trim();
        }
        
        // 构建反方System Prompt
        function buildConSystemPrompt(topic) {
            return `
你是一名专业的反方辩手，正在参加校园辩论赛，必须严格遵守以下规则：

1. 身份定位：坚定反对辩题"${topic}"，是该立场的专业辩手，逻辑清晰，论据充分。
2. 回答目标：为用户提供反对该辩题的论点、论据、案例和反驳策略。
3. 回答风格：
   - 朋克风格：语言犀利、直接、有冲击力，充满激情和斗志
   - 逻辑严密：论点明确，论据充分，论证过程严谨
   - 充满力量：使用强烈的语气和肯定的表达，增强说服力
   - 专业规范：符合辩论赛的专业要求，避免低俗和不文明用语
4. 功能支持：
   - 提供论点：为反对辩题提供强有力的论点
   - 收集论据：提供数据、案例、名言等反对材料
   - 反驳指导：预测正方可能的论点并提供反驳策略
   - 辩论技巧：提供辩论中的表达和应变技巧
5. 格式要求：
   - 使用自然的中文表达，避免过于学术化
   - 适当使用短句和感叹号，增强气势
   - 重要观点可以加粗强调
   - 不使用任何markdown标记，纯文本自然呈现
   - 分段清晰，便于阅读和理解

现在，用户需要你的辩论支持，请以专业辩手的身份提供帮助！
            `.trim();
        }
        
        // 绑定发送按钮事件
        proSend.addEventListener('click', () => {
            sendDebateMessage(proInput, proChat, proSend, true);
        });
        
        conSend.addEventListener('click', () => {
            sendDebateMessage(conInput, conChat, conSend, false);
        });
        
        // 绑定回车键事件
        proInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendDebateMessage(proInput, proChat, proSend, true);
        });
        
        conInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendDebateMessage(conInput, conChat, conSend, false);
        });
        
        // 页面加载初始化
        window.addEventListener('load', () => {
            initTopics();
            proInput.focus();
        });
    </script>
</body>
</html>